<template>
  <a-layout-sider class="u-sider" :width="236" breakpoint="lg" :trigger="null"
      v-model:collapsed="sys.collapsed" collapsible :collapsedWidth="62" :theme="ui.theme">
    <template #trigger>
      <span>
        <MenuUnfoldOutlined v-if="collapsed" class="u-task-icon trigger" />
        <MenuFoldOutlined v-else class="u-task-icon trigger" />
      </span>
    </template>
    <!--侧边菜单-->
    <div class="u-sider-menu">
      <a-menu @select="selectMenu" mode="inline" :openKeys="openKeys"
              :selectedKeys="selectedKeys" @openChange="openChange" :theme="ui.theme">
        <template v-for="menu in menus">
          <template v-if="menu.type=='V'">
            <a-menu-item :key="menu.url">
              <UIcon :type="menu.icon || 'iz-icon-icon'" />
              <span class="u-level-title">{{menu.name}}</span>
            </a-menu-item>
          </template>
          <template v-else-if="menu.type=='M'">
            <!--递归的子菜单-->
            <ivz-sub-menu :menu="menu"/>
          </template>
        </template>
      </a-menu>
    </div>
  </a-layout-sider>
</template>

<script>
import {inject, ref} from "vue";
import IvzSubMenu from '@/views/main/SubMenu.vue'
import {mapGetters, mapMutations} from "vuex";
import {GlobalConfigKey} from "@/utils/ProvideKeys";
import store from "@/store";
import {MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons-vue";

export default {
  name: "LayoutSider",
  setup() {
    let ui = inject(GlobalConfigKey).ui;
    let sys = store.state.sys;
    return {ui, sys}
  },
  components: {IvzSubMenu, MenuFoldOutlined, MenuUnfoldOutlined},
  computed: {
    ...mapGetters({
      menus: 'sys/menus',
      openKeys: 'sys/openKeys',
      collapsed: 'sys/collapsed',
      taskBarData: 'sys/taskBarData',
      selectedKeys: 'sys/selectedKeys',
    }),
  },
  methods: {
    ...mapMutations({
      pushAndSwitchTask: 'sys/pushAndSwitchTask',
      switchActiveMenuTo: 'sys/switchActiveMenuTo',
      switchOpenSubMenuTo: 'sys/switchOpenSubMenuTo'
    }),
    selectMenu(menu) {
      this.$router.push(menu.key).then(() => {
        this.switchActiveMenuTo(menu.key);
      }).catch(reason => console.error(`路由跳转失败[${reason}]`))
    },

    openChange(openKeys) {
      this.switchOpenSubMenuTo(openKeys);
    },
  }
}
</script>

<style>
.u-sider {
  z-index: 878;
}
.u-sider .ant-layout-sider-children {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.u-sider .u-sider-menu {
  flex-grow: 1;
  overflow: hidden auto;
}
/*侧边菜单栏滚动条样式*/
.u-sider .ant-layout-sider-collapsed .ant-menu-inline-collapsed {
  width: 72px;
}
.u-sider .ant-layout-sider-children ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.u-sider-menu .ant-menu-sub.ant-menu-inline {
  background: #f0f2f5d4;
}
.u-sider-menu .ant-menu-submenu-title:hover {
  background: #f0f2f5;
}
.u-sider-menu .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
  padding: 0px 22px!important;
}
</style>
